<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="子树节点字段名称" >
                <el-input v-model="propJson.childrenField" style="width: 100%" placeholder="子树节点字段名称"/>
            </el-form-item>

            <el-form-item label="label字段名称" >
                <el-input v-model="propJson.labelField" style="width: 100%" placeholder="label字段名称"/>
            </el-form-item>

            <el-form-item label="value字段名称" >
                <el-input v-model="propJson.valueField" style="width: 100%" placeholder="value字段名称"/>
            </el-form-item>

            <el-form-item label="label字体大小" >
                <el-input v-model="propJson.fontSize" style="width: 100%" placeholder="label字体大小"/>
            </el-form-item>

            <el-form-item label="单个树节点的高度" >
                <el-input v-model="propJson.treeHeight" style="width: 100%" placeholder="单个树节点的高度"/>
            </el-form-item>

            <el-form-item label="是否默认全部展开">
                <el-radio-group v-model="propJson.isExpandAll">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否添加点击事件">
                <el-radio-group v-model="propJson.isAddClickAction">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否只有叶子节点可以点击" v-if="propJson.isAddClickAction">
                <el-radio-group v-model="propJson.isOnlyChildrenClick">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider v-if="propJson.isAddClickAction">点击事件配置</el-divider>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.isAddClickAction">
                <el-button type="primary" class="addCollapse" size="small" @click="addClickAction()">添加点击行为</el-button>
            </div>

            <CommonThirdServiceAction v-if="propJson.isAddClickAction" :actionList="propJson.treeClickAction" :commonParam="commonParam"/>
            <el-divider v-if="propJson.isAddClickAction"></el-divider>

            <el-divider>内容获取</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.contentInfo ? propJson.contentInfo : {}" :commonParam="commonParam" />

            <el-divider></el-divider>

            <el-form-item label="是否添加自定义节点内容">
                <el-radio-group v-model="propJson.isAddCustomAction">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item v-if="propJson.isAddCustomAction" label="节点插槽名称">
                <el-input v-model="propJson.slotName" style="width: 100%" placeholder="节点插槽名称" />
            </el-form-item>

            <el-form-item v-if="propJson.isAddCustomAction" label="自定义节点内容">
                <el-input v-model="propJson.customActionContent" style="width: 100%" placeholder="自定义节点内容" type="textarea"/>
            </el-form-item>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.isAddCustomAction">
                <span style="font-size: 12px">自定义操作添加完后需要点击注入</span>
            </div>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.isAddCustomAction">
                <el-button type="primary" class="addCollapse" size="small" @click="addCustomAction()">注入</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts" name="TreeDrawer">
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode.ts";
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue";
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction.vue";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addCustomAction() {
    if (!propJson.value.slotList) {
        propJson.value.slotList = []
    }
    let existFlag = false
    // 遍历查询是否已经存在
    propJson.value.slotList.forEach(res => {
        if (res.slotName === propJson.value.slotName) {
            res.slotContent = propJson.value.customActionContent
            existFlag = true
        }
    })
    if (existFlag) {
        return
    }
    propJson.value.slotList.push({slotName: propJson.value.slotName, slotContent: propJson.value.customActionContent})
}

function addClickAction() {
    if (!propJson.value.treeClickAction) {
        propJson.value.treeClickAction = []
    }
    let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", responseType: "default", apiType: "MSOA", apiPath: "",
        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
    propJson.value.treeClickAction.push(variableInfo)
}
</script>

<style scoped lang="less">

</style>